<template>
  <div>
    <div class="metric-container">
      <div class="metric-item">
        <el-statistic
            group-separator=","
            :value="this.usersNumber"
            title="新增用户数量"
        ></el-statistic>
      </div>
      <div class="metric-item" style="border-color: #00c7ff;">
        <el-statistic
            group-separator=","
            :value="this.driversNum"
            title="当前司机数量"
        ></el-statistic>
      </div>
      <div class="metric-item" style="border-color: #27b148">
        <el-statistic
            group-separator=","
            :value="this.travelNumber"
            title="行驶中数量"
        ></el-statistic>
      </div>
      <div class="metric-item" style="border-color: #ff7272">
        <el-statistic
            group-separator=","
            :value="this.unloadedNumber"
            title="空载数量"
        ></el-statistic>
      </div>
      <div class="metric-item" style="border-color: #c465e2">
        <el-statistic
            group-separator=","
            :value="this.unansweredOrders"
            title="当前未接订单"
        ></el-statistic>
      </div>
      <!-- 其他指标项 -->
    </div>
    <div class="chart-container">
      <div class="chart-item">
        <span>当前订单完成量</span><br><br>
        <el-progress type="circle" width="160" :percentage="Complete" :stroke-width="18"></el-progress>
      </div>
      <div class="chart-item">
        <span>投诉处理情况</span><br><br>
        <el-progress type="circle" width="160" :percentage="Complaint" :stroke-width="18"></el-progress>
      </div>

      <div>
        <div class="metric-items" style="background-color: #4ea9cb">
          <span>平台流入金额</span><br>
          <span>{{ this.inflow }}</span>
        </div>

        <div class="metric-items" style="background-color: #ff9959">
          <span>平台收益</span><br>
          <span>{{ this.Earnings }}</span>
        </div>
      </div>

      <!--      水平线-->
      <el-divider></el-divider>
      <div class="chart-items">
        <span>订单量趋势</span>
        <el-select style="margin-right: 20px" v-model="timeRange" placeholder="请选择时间范围">
          <el-option label="上午" value="上午"></el-option>
          <el-option label="下午" value="下午"></el-option>
        </el-select>
        <br><br>
        <div class="chart-wrapper">
          <Tendency v-if="this.timeRange=='上午'"></Tendency>
          <Tendency2 v-if="this.timeRange=='下午'"></Tendency2>
        </div>
        <div class="order-count-container">
          <span class="label">当天订单量</span>
          <span class="count" style="font-weight: bold;font-size: 30px">{{ thatDayNum }}</span>
        </div>
      </div>
      <!-- 其他图表项 -->
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Tendency from "@/components/cockpit/echarts/Tendency.vue";
import echarts from "echarts";
import Tendency2 from "@/components/cockpit/echarts/Tendency2.vue";

export default {
  components: {
    Tendency2,
    Tendency
  },
  data() {
    return {
      inflow: null,
      Earnings: null,
      usersNumber: null,
      unansweredOrders: null,
      driversNum: null,
      travelNumber: null,
      Complete: 0,
      unloadedNumber: null,
      thatDayNum: null,
      timeRange: '上午',
      Complaint:0
    }
  },
  methods: {
    echartsInit() {
      console.log(111)
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('chartContainer'));
      console.log(111)

      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: this.xAxisData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 单'
          }
        },
        series: [
          {
            type: 'line',
            areaStyle: {},
            data: this.seriesData
          }
        ]
      });
    },

    getComplaint() {
      axios.get("http://localhost:9999/api-cockpit/orders/getComplaint").then(res => {
        this.Complaint = res.data.data;
      })
    },
    //平台流入金额
    getInflow() {
      axios.get("http://localhost:9999/api-cockpit/orders/getInflow").then(res => {
        this.inflow = res.data.data;
      })
    },
    //收益金额
    getEarnings() {
      axios.get("http://localhost:9999/api-cockpit/orders/getEarnings").then(res => {
        this.Earnings = res.data.data;
      })
    },

    //新增用户数量
    getUserGrowth() {
      axios.get("http://localhost:9999/api-cockpit/backstageUser/getCount").then(res => {
        this.usersNumber = res.data.data;
      })
    },
    //未接订单
    getUnansweredOrders() {
      axios.get("http://localhost:9999/api-cockpit/orders/getUnansweredOrders").then(res => {
        this.unansweredOrders = res.data.data;
      })
    },
    //司机数量
    getDriversNum() {
      axios.get("http://localhost:9999/api-cockpit/backstageUser/getDriversNum").then(res => {
        this.driversNum = res.data.data;
      })
    },
    //订单完成量百分比
    getOrderComplete() {
      axios.get("http://localhost:9999/api-cockpit/orders/getOrderComplete").then(res => {
        this.Complete = res.data.data;
      })
    },
    //行驶中数量
    getTravelNumber() {
      axios.get("http://localhost:9999/api-cockpit/backstageUser/getTravelNumber").then(res => {
        this.travelNumber = res.data.data;
      })
    },
    //空载数量
    getUnloadedNumber() {
      axios.get("http://localhost:9999/api-cockpit/backstageUser/getUnloadedNumber").then(res => {
        this.unloadedNumber = res.data.data;
      })
    },
    //当天订单量
    getThatDayNum() {
      axios.get("http://localhost:9999/api-cockpit/orders/getThatDayNum").then(res => {
        this.thatDayNum = res.data.data;
      })
    }

  },
  mounted() {
    this.getEarnings();
    this.echartsInit();
    this.getUserGrowth();
    this.getUnansweredOrders();
    this.getDriversNum();
    this.getOrderComplete();
    this.getTravelNumber();
    this.getUnloadedNumber();
    this.getThatDayNum();
    this.getInflow();
    this.getComplaint();
  }
}
</script>

<style>
.metric-container {
  display: flex;
  flex-wrap: wrap;
}

.metric-item {
  width: 200px;
  height: 60px;
  margin-left: 60px;
  padding: 10px;
  border: 5px solid #409eff;
  border-radius: 10px;
}

.metric-items {
  width: 180px;
  height: 80px;
  margin: 20px;
  padding: 10px;
  border-radius: 10px;
}

.chart-container {
  display: flex;
  flex-wrap: wrap;

}

.chart-item {
  width: 500px;
  height: 200px;
  margin: 10px;
}

.chart-items {
  width: 100%;
  margin: 10px;
}

.line-chart-item,
.bar-chart-item {
  width: 400px;
  margin: 10px;
}

.el-statistic .head {
  font-size: 16px;
  color: #409eff;
}

.el-statistic .con span {
  color: #409eff;
}

.chart-wrapper {
  position: relative;
}

.order-count-container {
  position: absolute;
  top: 46%;
  right: 5%;
  display: flex;
  align-items: center;
  margin-top: 20px;
}
</style>
